<template>
  <div class="admi">
      <div class="brea">
          <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/homepage' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item
          ><a href="/">权限</a></el-breadcrumb-item
        >
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    </div>
  </div>
<div class="ipt">
        <div class="top">
            <div class="left">
                <span>筛选搜索</span>
            </div>
            <div class="right">
                <el-button>重置</el-button>
                <el-button type="primary">查询搜索</el-button>
            </div>
        </div>
    <div class="lab">
        <label class="lab">姓名/账号</label>
     <el-autocomplete
        v-model="state"
        popper-class="my-autocomplete"
        placeholder="请输入账号、姓名"
        :trigger-on-focus="false"
    >
  </el-autocomplete>
    </div>
</div>
<div class="center">
    <p>数据列表</p>
    <div class="bt">
        <el-button type="primary" @click="add">添加</el-button>
    </div>
</div>

 <div class="box">
  <el-table :data="tableData"  border >
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="username" label="账号" />
    <el-table-column prop="nickName" label="姓名" />
    <el-table-column prop="email" label="邮箱" />
    <el-table-column label="创建时间">
        <template #default="{row}">
            {{formatDate(row.createTime)}}
        </template>
    </el-table-column>
    <el-table-column label="最后登录">
        <template #default="{row}">
            {{formatDate(row.loginTime)}}
        </template>
    </el-table-column>
    <el-table-column prop="status" label="是否启用">
       <template #default="{row}">
         <el-switch  :active-value="1" :inactive-value="0" v-model='row.status'/>
       </template>
    </el-table-column>
    <el-table-column  label="操作" width="200">
      <template #default="{row}">
        <el-button  type="text" @click="allocRoleInfo(row)"
          >分配角色</el-button
        >
        <el-button type="text" @click="handleEact(row)"
          >编辑</el-button
        >
      </template>
    </el-table-column>
  </el-table>
 </div>
 
    <el-pagination
      v-model:currentPage="pager.currentPage"
      v-model:page-size="pager.pageSize"
      :small="pager.small"
      :disabled="pager.disabled"
      :background="pager.background"
      layout="total,sizes, prev, pager, next, jumper"
      :total="pager.total"
      :page-sizes="[5,10,20,50,100]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <EditAdmin
    :visible="editAdiminVisible"
    @close="closeAdminInfo"
    :form-data="editAdminData"
  />


  <RoleAssign :visible="allocRolesVisible" @close="closeAllocRole" :admin-id="adminId"/>
    
</template>

<script lang='ts' setup>

import dayjs from 'dayjs';
import {reactive, ref } from 'vue'
import { umsAdmin } from '../../../request/http';
import EditAdmin from '../components/editAdmin.vue';
import RoleAssign from '../components/RoleAssign.vue';



let tableData = ref([] as {}[]);
// 分配角色框操作
const allocRolesVisible = ref(false);
const adminId = ref();
function allocRoleInfo(row:AdminResDataObj) {
  allocRolesVisible.value = true;
  adminId.value = row.id;
}
function closeAllocRole() {
  allocRolesVisible.value = false;
}


const editAdiminVisible = ref(false);
const editAdminData = ref({} as AdminResDataObj);

// 编辑
function handleEact(row:AdminResDataObj) {
  editAdiminVisible.value = true;
  editAdminData.value = row;
}

function closeAdminInfo() {
  editAdiminVisible.value = false
}

// 封装数据请求格式
async function fetchData( pageNum:number=1,pageSize:number=10) {
  const adminListRes = await umsAdmin.getAdminList({
    pageNum,
    pageSize
  });
  if (adminListRes.code === 200) {
    tableData.value = adminListRes.data.list;
    pager.total = adminListRes.data.total;
  }
}
fetchData();


const state = ref('')

// 分页器的默认值
const pager = reactive({
  currentPage: 1,
  pageSize: 10,
  small: true,
  disabled: false,
  background:false,
  total:0
})


// 单选框
const radio = ref(6)

function handleSizeChange() {
  fetchData(pager.currentPage,pager.pageSize)
}
function handleCurrentChange() {
  fetchData(pager.currentPage,pager.pageSize)
}

// 添加
function add() {
  editAdiminVisible.value = true;
  editAdminData.value = {} as AdminResDataObj
}


function formatDate(time: string) {
  if (!time) return '';
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
}


</script>
<style lang='less' scoped>
    .admi{
        padding: 1px;
    }
    .brea{
        margin-top: 10px;
        margin-left: 10px;
    }
    .ipt{
        width: 95%;
        height: 150px;
        border: 1px solid #ccc;
        box-shadow: 1px 0 2px;
        margin: 50px auto 0;
        border-radius: 4px;
        .top{
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left{
                margin-left: 20px;
            }
            .right{
                margin-right: 20px;
            }
        }
        .lab{
            padding: 20px 40px 0;
        }
        
    }
    .center{
       width: 95%;
        height: 60px;
        border: 1px solid #ccc;
        border-radius: 4px;
        display: flex;
        justify-content: space-between;
        margin: 20px auto;
        align-items: center;
        box-sizing: border-box;
        padding: 0  20px;
        box-shadow: 1px 1px 2px;
    }
    .box{
      width: 95%;
      margin: 0 auto;
    }
</style>